<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../epii.js"></script>
</head>
<body>
<div id="content">
    <h1 r-data="title">
    </h1>
    <div r-data="文章内容：{content}"></div>
    <br>
     <div r-data="{subject}" r-data-default="没有被赋值，只能用：{title}"></div><!-- 默认值-->
    <br>
    <input r-data="inputvalue"><!-- input 负值方法1-->
    <input value="{inputvalue}"><!-- input 负值方法2-->
    <br>
    <img r-data="img_url" style="width: {img_width}px"><!-- img 负值方法1-->
    <img src="{img_url}" style="width: {img_width}px"><!-- img 负值方法2  ,但这种存在缺点，因为在解析前，已经加载一次不存在的图片，多一次请求，不推荐-->
</div>
<script>
    var myepii = epii(document.getElementById("content"));//初始化殷勤，需要制定dom节点 可以是 body

    myepii.setData({
        title: "我是标题",
        content: "我是内容主题",
        inputvalue: "input内容",
        img_url:"https://www.baidu.com/img/bd_logo1.png",
        img_width:100
    });

    setTimeout(function () {
        myepii.setData({
            title: "我是新的标题",
            content: "我是新的内容主题"
        });
    }, 3000);
</script>
</body>
</html>
